import React from "react";
import { Drawer, Divider, Switch, Popover, Tooltip } from "antd";
import { LayoutOutlined, FireOutlined, SettingOutlined, CheckCircleFilled, QuestionCircleOutlined } from "@ant-design/icons";
import DarkSwitch from "@/components/DarkSwitch";
import ColorPicker from "./components/ColorPicker";
import { useGlobalStore } from "@/store/global";
import { useMenuStore } from "@/store/menus";
import { useShallow } from "zustand/react/shallow";
import "./index.scss";

const ThemeDrawer: React.FC = () => {
  const { isCollapse, setCollapsed } = useMenuStore(useShallow((state) => ({ isCollapse: state.isCollapse, setCollapsed: state.setCollapsed })));
  const { layout, isGrey, isWeak, isHappy, siderInverted, headerInverted, menuSplit, accordion, breadcrumb, breadcrumbIcon, tabs, tabsIcon, tabsDrag, footer, themeDrawerVisible, setGlobalState } = useGlobalStore(
    useShallow((state) => ({
      layout: state.layout,
      isGrey: state.isGrey,
      isWeak: state.isWeak,
      isHappy: state.isHappy,
      siderInverted: state.siderInverted,
      headerInverted: state.headerInverted,
      menuSplit: state.menuSplit,
      accordion: state.accordion,
      breadcrumb: state.breadcrumb,
      breadcrumbIcon: state.breadcrumbIcon,
      tabs: state.tabs,
      tabsIcon: state.tabsIcon,
      tabsDrag: state.tabsDrag,
      footer: state.footer,
      themeDrawerVisible: state.themeDrawerVisible,
      setGlobalState: state.setGlobalState
    }))
  );

  return (
    <Drawer title="主题配置" width={290} zIndex={999} closable={false} maskClosable={true} open={themeDrawerVisible} className="theme-drawer" onClose={() => setGlobalState({ key: "themeDrawerVisible", value: false })}>
      {/* layout switching */}
      <Divider className="divider">
        <LayoutOutlined />
        布局样式
      </Divider>
      <div className="layout-box">
        <Tooltip placement="top" title="纵向" arrow={true} mouseEnterDelay={0.2}>
          <div className={`layout-item mb-[22px] layout-vertical ${layout === "vertical" && "layout-active"}`} onClick={() => setGlobalState({ key: "layout", value: "vertical" })}>
            <div className="layout-dark"></div>
            <div className="layout-container">
              <div className="layout-light"></div>
              <div className="layout-content"></div>
            </div>
            {layout === "vertical" && <CheckCircleFilled />}
          </div>
        </Tooltip>
        <Tooltip placement="top" title="经典" arrow={true} mouseEnterDelay={0.2}>
          <div className={`layout-item mb-[22px] layout-classic ${layout === "classic" && "layout-active"}`} onClick={() => setGlobalState({ key: "layout", value: "classic" })}>
            <div className="layout-dark"></div>
            <div className="layout-container">
              <div className="layout-light"></div>
              <div className="layout-content"></div>
            </div>
            {layout === "classic" && <CheckCircleFilled />}
          </div>
        </Tooltip>
        <Tooltip placement="top" title="横向" arrow={true} mouseEnterDelay={0.2}>
          <div className={`layout-item layout-transverse ${layout === "transverse" && "layout-active"}`} onClick={() => setGlobalState({ key: "layout", value: "transverse" })}>
            <div className="layout-dark"></div>
            <div className="layout-content"></div>
            {layout === "transverse" && <CheckCircleFilled />}
          </div>
        </Tooltip>
        <Tooltip placement="top" title="分栏" arrow={true} mouseEnterDelay={0.2}>
          <div className={`layout-item layout-columns ${layout === "columns" && "layout-active"}`} onClick={() => setGlobalState({ key: "layout", value: "columns" })}>
            <div className="layout-dark"></div>
            <div className="layout-light"></div>
            <div className="layout-content"></div>
            {layout === "columns" && <CheckCircleFilled />}
          </div>
        </Tooltip>
      </div>
      <div className="theme-item mt-[30px]">
        <span>
          菜单分割
          <Tooltip title="经典模式下生效">
            <QuestionCircleOutlined />
          </Tooltip>
        </span>
        <Switch disabled={layout !== "classic"} checked={menuSplit} onChange={(value) => setGlobalState({ key: "menuSplit", value })} />
      </div>
      <div className="theme-item">
        <span>
          侧边栏反转色
          <Tooltip title="侧边栏颜色变为深色模式">
            <QuestionCircleOutlined />
          </Tooltip>
        </span>
        <Switch checked={siderInverted} onChange={(value) => setGlobalState({ key: "siderInverted", value })} />
      </div>
      <div className="theme-item mb-[35px]">
        <span>
          头部反转色
          <Tooltip title="头部颜色变为深色模式">
            <QuestionCircleOutlined />
          </Tooltip>
        </span>
        <Switch checked={headerInverted} onChange={(value) => setGlobalState({ key: "headerInverted", value })} />
      </div>

      {/* theme settings */}
      <Divider className="divider">
        <FireOutlined />
        全局主题
      </Divider>
      <div className="theme-item">
        <span>主题颜色</span>
        <Popover placement="left" trigger="click" content={ColorPicker}>
          <label className="primary"></label>
        </Popover>
      </div>
      <div className="theme-item">
        <span>暗黑模式</span>
        <DarkSwitch />
      </div>
      <div className="theme-item">
        <span>灰色模式</span>
        <Switch
          checked={isGrey}
          onChange={(value) => {
            if (isWeak) setGlobalState({ key: "isWeak", value: false });
            setGlobalState({ key: "isGrey", value });
          }}
        />
      </div>
      <div className="theme-item">
        <span>色弱模式</span>
        <Switch
          checked={isWeak}
          onChange={(value) => {
            if (isGrey) setGlobalState({ key: "isGrey", value: false });
            setGlobalState({ key: "isWeak", value });
          }}
        />
      </div>
      <div className="theme-item">
        <span>快乐模式</span>
        <Switch checked={isHappy} onChange={(value) => setGlobalState({ key: "isHappy", value })} />
      </div>
      {/* interface settings */}
      <Divider className="divider">
        <SettingOutlined />
        界面设置
      </Divider>
      <div className="theme-item">
        <span>菜单折叠</span>
        <Switch checked={isCollapse} onChange={(value) => setCollapsed(value)} />
      </div>
      <div className="theme-item">
        <span>菜单手风琴</span>
        <Switch checked={accordion} onChange={(value) => setGlobalState({ key: "accordion", value })} />
      </div>
      <div className="theme-item">
        <span>面包屑</span>
        <Switch checked={breadcrumb} onChange={(value) => setGlobalState({ key: "breadcrumb", value })} />
      </div>
      <div className="theme-item">
        <span>面包屑图标</span>
        <Switch checked={breadcrumbIcon} onChange={(value) => setGlobalState({ key: "breadcrumbIcon", value })} />
      </div>
      <div className="theme-item">
        <span>标签栏</span>
        <Switch checked={tabs} onChange={(value) => setGlobalState({ key: "tabs", value })} />
      </div>
      <div className="theme-item">
        <span>标签栏图标</span>
        <Switch checked={tabsIcon} onChange={(value) => setGlobalState({ key: "tabsIcon", value })} />
      </div>
      <div className="theme-item">
        <span>标签栏拖拽</span>
        <Switch checked={tabsDrag} onChange={(value) => setGlobalState({ key: "tabsDrag", value })} />
      </div>
      <div className="theme-item">
        <span>页脚</span>
        <Switch checked={footer} onChange={(value) => setGlobalState({ key: "footer", value })} />
      </div>
    </Drawer>
  );
};

export default ThemeDrawer;
